<template>
  <div>
    <el-row>
     <el-col :span="8" class="left">

      <p><el-button icon="el-icon-back" type="primary"><router-link to="/home">返回</router-link></el-button>
        <span style="margin-left: 150px;font-weight: 700px;font-size: 20px;">个人中心</span></p>
      <div class="lcontent">
        <!-- 用户头像 -->
        <div class="userimg">
          <img :src="icon">
          <!-- <el-upload
            class="upload-demo"
            :auto-upload="false"
            
            
            :before-upload="beforeUpload"
             multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">修改头像</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
          
          <input type="file" @input="upload" ref="up" style="display:none" />
          <el-button @click="$refs.up.click()">上传图片</el-button>

        </div>
         <!-- 用户信息 -->
        
         <el-card shadow="always" :body-style="{height:'380px'}" id="card">
              <div id="cent" style="font-size: 20px;">
                {{ user.nickname }}
                
              </div>     
             
         
         </el-card>
        
      </div>
     </el-col>
     <el-col :span="16" class="right">
      
             
          <div class="form">
              <div class="form-row"><div class="label">用户名</div>: <el-input  v-model="user.username" :disabled="true"></el-input></div>
              <div class="form-row"><div class="label">昵 称:</div> <el-input  v-model="user.nickname" ></el-input></div>
        
              <div class="form-row"><div class="label">邮 箱:</div> <el-input  v-model="user.email"></el-input></div>
          
        
              <div class="form-row"><div class="label">手机号:</div> <el-input type="text" v-model="user.phone"></el-input></div>
         
           
           <div class="form-row"><div class="label">角 色:</div>  
                <el-tag type="success" style="width: 100px;height: 40px;font-size: 20px;line-height: 40px;">
                  {{ role }}</el-tag>
           </div>
             <!-- <el-form-item label="简介:" v-model="user.address" >
               <el-input type="text" :disabled="true"></el-input>
            </el-form-item> -->
          
              <el-button type="primary" size="big"  id="node" 
              @click="editUser">修改信息</el-button>
           
           
             
        
           </div>
       
      </el-col>
    </el-row>
     
  </div>
</template>

<script>
import reqHome from '@/api/home'
import reqMine from '@/api/userinfo/main'



export default {
  mounted(){

    this.getUserinfo(this.$store.state.userinfo.user.id)


  
  },
  data(){
    return{
      icon:'',
      //user:{},
      // nickname:'',
      // username:'',
      // email:'',
      // phone:'',
      user:{},
      role:'',
    }
  },
  methods:{

    async   getUserinfo(userid){
        const res = await reqHome.getUserInfo(userid)  
         if(res.code==200){
          this.icon = res.data.icon
          // this.username = res.data.user.username
          // this.nickname = res.data.user.nickname
          // this.email = res.data.user.email
          // this.phone = res.data.user.phone
          this.user = res.data.user
             //判断角色类型
         if(res.data.user.role==1) this.role = '用户'
         if(res.data.user.role==2) this.role = '审核员'
         if(res.data.user.role==3) this.role = '管理员'
        

         }
       },
       //上传头像
      async  upload(){
    const data = new FormData()
    data.append('file',this.$refs.up.files[0])
    const res = await reqMine.uploadUserIcon(this.$store.state.userinfo.user.id,data)
    if(res.code==200){
      this.icon=''
      this.$nextTick(()=>{
        this.icon = res.data
      })
    }

       },
           //修改用户个人信息
      async editUser(){
          

         const res = await reqMine.editUserInfo(this.user)
         if(res.code==200){
          this.$message({type:'success',message:'修改个人信息成功！'})
         }else{
          this.$message(res.message)
         }
       }


  
  }
}
</script>
 
<style lang="less" scoped>
 a{
  text-decoration: none;
  color: white;
 }
  .left{
    
    height:600px;
  }
 
  .el-card{
    height: 300px;
  }
  .userimg{
    height:300px;
    background-color: rgba(73, 70, 70, 0.1);
    text-align: center;
    padding-top: 30px;
    border-top: solid 4px rgb(8, 34, 228);
    
    img{
      border-radius: 50%;
      width:200px;
      height:200px;
    }
 
  #cent{
    width: 200px;
    height: 100px;
    background-color: rgb(97, 19, 222);
  }
 
}
   
  
  
  .el-col-16{
      height: 700px;
      background-color: rgba(0, 34, 255, 0.1);
      
    }
    //表单
    .form{
     // background-color: aqua;
      width: 100%;
      height: 700px;
      text-align: center;
      padding-top: 100px;
      padding-left: 200px;
    .form-row{
      margin-bottom: 60px;
      width: 500px;
    }
    .el-input{
     
      width: 400px;
    }
    .label{
      float: left;
      font-size: 20px;
    }
    }
</style>